<template>
  <el-card class="box-card-top">
    <!-- 三级分类全局组件 -->
    <CategorySelect :scene="scene" />
  </el-card>
  <el-card class="box-card-content">
    <div v-show="scene == 0">
      <el-button
        type="primary"
        size="default"
        icon="Plus"
        :disabled="categoryStore.c3Id ? false : true"
        @click="addSpu"
      >
        添加SPU
      </el-button>
      <el-table style="width: 100%; margin: 10px 0" border :data="records">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          label="SPU名称"
          align="center"
          width="300"
          prop="spuName"
        ></el-table-column>
        <el-table-column
          label="SPU描述"
          align="center"
          width="width"
          prop="description"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template #="{ row, $index }">
            <el-button
              type="primary"
              icon="Plus"
              size="small"
              title="添加SKU"
            ></el-button>
            <el-button
              type="warning"
              icon="Edit"
              size="small"
              title="修改SPU"
              @click="updateSpu(row)"
            ></el-button>
            <el-button
              type="info"
              icon="View"
              size="small"
              title="查看SKU列表"
            ></el-button>
            <el-button
              type="danger"
              icon="Delete"
              size="small"
              title="删除SPU"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 
        @current-change="getHasTrademark"
        @size-change="sizeChange"
       -->
      <el-pagination
        style="margin-top: 20px"
        :pager-count="7"
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[3, 5, 7, 9]"
        :small="false"
        :background="true"
        layout="prev, pager, next, jumper, -> , sizes, total"
        :total="total"
        @current-change="getHasSpu"
        @size-change="sizeChange"
      />
    </div>
    <!-- 添加spu或者修改spu的结构 -->
    <SpuForm ref="spu" v-show="scene == 1" @changeScene="changeScene" />
    <!-- 添加sku结构 -->
    <SkuForm v-show="scene == 2" @changeSkuScene="changeSkuScene" />
  </el-card>
</template>
<script setup lang="ts">
import SpuForm from './spuForm.vue'
import SkuForm from './skuForm.vue'
import type {
  HasSpuResponseData,
  Records,
  SpuData,
} from '@/api/product/spu/type'
import { ref, watch } from 'vue'
import { reqHasSpu } from '@/api/product/spu/index'

// 引入分类的仓库
import useCategoryStore from '@/store/modules/category'

const categoryStore = useCategoryStore()

let scene = ref<number>(0)

// 分页器默认页码
let pageNo = ref<number>(1)
// 设置每页展示数据的条数
let limit = ref<number>(3)
// 总条数
let total = ref<number>(0)

let records = ref<Records>([])

// 获取子组件实例 spu
let spu = ref<any>()

// 添加 spu 的按钮事件回调
const addSpu = () => {
  scene.value = 1
}

// 修改 spu 的按钮事件回调
const updateSpu = (row: SpuData) => {
  scene.value = 1
  // console.log('rrr', row, spu.value)
  spu.value.initHasSpuData(row)
}

// 子组件 spuForm 绑定的自定义事件： 目前是让子组件通知父组件切换场景为 0
const changeScene = (num: number) => {
  // 子组件SpuForm 点击取消按钮之后变为场景0，展示已有的 SPU
  scene.value = num
}

// 监听三级分类 id 的变化
watch(
  () => categoryStore.c3Id,
  () => {
    // 保证有三级分类的 id 再发请求
    if (categoryStore.c3Id) {
      getHasSpu()
    }
  },
)
// 此方法执行： 可以获取某一个三级分类下全部的已有的SPU
const getHasSpu = async (pager = 1) => {
  // 修改当前页码
  pageNo.value = pager
  const res: HasSpuResponseData = await reqHasSpu(
    pageNo.value,
    limit.value,
    categoryStore.c3Id,
  )
  console.log('opo', res)
  if (res.code == 200) {
    records.value = res.data.records
    total.value = res.data.total
  }
}
// 当下拉菜单发生变化的时候会触发此方法
// pagesize: 下拉菜单用户选中的数值
const sizeChange = () => {
  // 当前每一页的数据量发生变化的时候， 当前页码归 1
  // pageNo.value = 1
  getHasSpu()
}
</script>
<style scoped lang="scss">
.box-card-content {
  margin-top: 20px;
}
</style>
